<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Speakr - Audio Transcription & Summarization</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <!-- EasyMDE Markdown Editor -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='img/icon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='img/icon-16x16.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='img/icon-180x180.png') }}">
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    <meta name="theme-color" content="#2563eb">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    maxHeight: {
                        '85vh': '85vh',
                        '90vh': '90vh'
                    },
                    colors: {
                        primary: 'var(--bg-primary)',
                        secondary: 'var(--bg-secondary)',
                        accent: 'var(--bg-accent)'
                    }
                }
            }
        }
    </script>
</head>
<body class="h-full bg-[var(--bg-primary)] text-[var(--text-primary)] transition-colors duration-300">
    <div id="loader" class="fixed inset-0 bg-gray-800 flex items-center justify-center z-50">
        <div class="text-white text-lg">Loading...</div>
    </div>
    <div id="app" v-cloak
         data-use-asr-endpoint="{{ use_asr_endpoint }}" 
         data-current-user-name="{{ current_user.name if current_user.is_authenticated else '' }}"
         class="h-full flex flex-col opacity-0 transition-opacity duration-500">
        
        <!-- Header -->
        <header class="bg-[var(--bg-secondary)] border-b border-[var(--border-primary)] px-3 sm:px-4 py-3 flex items-center justify-between flex-shrink-0 z-50">
            <!-- Left side: Menu toggle and logo -->
            <div class="flex items-center gap-2 sm:gap-4 min-w-0 flex-shrink">
                <!-- Menu Toggle Button -->
                <button @click="toggleSidebar" 
                        class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors duration-200 flex-shrink-0 flex items-center justify-center">
                    <i class="fas fa-bars text-lg"></i>
                </button>
                
                <!-- Logo and Title -->
                <div class="flex items-center gap-2 sm:gap-3 min-w-0">
                    <img src="{{ url_for('static', filename='img/icon-32x32.png') }}" alt="Speakr" class="w-7 h-7 sm:w-8 sm:h-8 flex-shrink-0">
                    <h1 class="text-lg sm:text-xl font-bold text-[var(--text-primary)] truncate">Speakr</h1>
                </div>
            </div>

            <!-- Right side: User menu and controls -->
            <div class="flex items-center gap-3">
                <!-- Inquire Mode Button -->
                {% if inquire_mode_enabled %}
                <a href="/inquire" 
                   class="px-2 py-1.5 bg-[var(--bg-accent)] text-[var(--text-accent)] rounded-lg hover:opacity-80 transition-opacity text-sm sm:px-4 sm:py-2 sm:min-w-[120px] sm:flex sm:items-center sm:gap-2 sm:justify-center">
                    <i class="fas fa-search"></i>
                    <span class="hidden sm:inline">Inquire</span>
                </a>
                {% endif %}

                <!-- New Recording Button -->
                <button @click="switchToUploadView" 
                        class="px-3 py-1.5 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-sm sm:px-4 sm:py-2 sm:min-w-[120px] sm:flex sm:items-center sm:gap-2 sm:justify-center">
                    <i class="fas fa-plus mr-1"></i>New
                    <span class="hidden sm:inline">Recording</span>
                </button>

                <!-- User menu -->
                {% if current_user.is_authenticated %}
                <div class="relative">
                    <button @click="isUserMenuOpen = !isUserMenuOpen" 
                            class="flex items-center gap-1 sm:gap-2 p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors duration-200"
                            title="User Menu">
                        <i class="fas fa-user-circle text-lg"></i>
                        <span class="hidden lg:inline text-sm">{{ current_user.name if current_user.is_authenticated else 'User' }}</span>
                        <i class="fas fa-chevron-down text-xs hidden sm:inline"></i>
                    </button>
                    
                    <!-- User dropdown -->
                    <div v-if="isUserMenuOpen"
                         class="absolute right-0 mt-2 w-56 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg shadow-lg z-50">
                        <a href="/account" class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-cog mr-2 w-4 text-center"></i>Account Settings
                        </a>
                        <a href="/account#tags" class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-tags mr-2 w-4 text-center"></i>Tag Management
                        </a>
                        <button @click="openSharesList" class="w-full text-left px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors flex items-center">
                            <i class="fas fa-share-alt mr-2 w-4 text-center"></i>Shared Transcripts
                        </button>
                        {% if current_user.is_admin %}
                        <a href="/admin" class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-user-shield mr-2 w-4 text-center"></i>Admin
                        </a>
                        {% endif %}
                        <div class="border-t border-[var(--border-primary)] my-1"></div>
                        <button @click="toggleDarkMode" class="w-full text-left px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors flex items-center">
                            <i :class="isDarkMode ? 'fas fa-sun' : 'fas fa-moon'" class="mr-2 w-4 text-center"></i>
                            <span>${ isDarkMode ? 'Light Mode' : 'Dark Mode' }</span>
                        </button>
                        <button @click="openColorSchemeModal" class="w-full text-left px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors flex items-center">
                            <i class="fas fa-palette mr-2 w-4 text-center"></i>
                            <span>Color Scheme</span>
                        </button>
                        <div class="border-t border-[var(--border-primary)] my-1"></div>
                        <a href="/logout" class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-sign-out-alt mr-2 w-4 text-center"></i>Logout
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
        </header>

        <div class="flex-1 flex overflow-hidden relative">
            <!-- Mobile Sidebar Backdrop -->
            <div v-if="!isSidebarCollapsed && isMobileScreen" 
                 @click="toggleSidebar"
                 class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden">
            </div>
            
            <!-- Sidebar -->
            <aside :class="['sidebar', isSidebarCollapsed ? 'collapsed' : '']">
                <div class="sidebar-content-wrapper">
                    <!-- Sidebar Header -->
                    <div class="p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-semibold">Recordings</h2>
                            <div class="flex gap-2">
                                {% if inquire_mode_enabled %}
                                <a href="/inquire" 
                                   class="px-2 py-1.5 bg-[var(--bg-accent)] text-[var(--text-accent)] rounded-lg hover:opacity-80 transition-opacity text-sm">
                                    <i class="fas fa-search"></i>
                                </a>
                                {% endif %}
                                <button @click="switchToUploadView" 
                                        class="px-3 py-1.5 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-sm">
                                    <i class="fas fa-plus mr-1"></i>New
                                </button>
                            </div>
                        </div>
                        
                        <!-- Search and Sort Controls -->
                        <div class="space-y-3">
                            <!-- Search Input -->
                            <div class="relative">
                                <input v-model="searchQuery" 
                                       type="text" 
                                       placeholder="Search recordings... (try: date:today, tag:meeting)" 
                                       class="w-full px-3 py-2 pl-9 pr-8 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] text-sm"></i>
                                <button v-if="searchQuery" 
                                        @click="searchQuery = ''"
                                        class="absolute right-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-primary)] text-sm">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            
                            <!-- Sort Toggle -->
                            <button @click="sortBy = sortBy === 'created_at' ? 'meeting_date' : 'created_at'"
                                    class="w-full flex items-center justify-between px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm hover:bg-[var(--bg-tertiary)] transition-colors">
                                <span class="flex items-center">
                                    <i :class="['fas mr-2 text-[var(--text-muted)]', sortBy === 'meeting_date' ? 'fa-calendar' : 'fa-upload']"></i>
                                    Sort by: ${sortBy === 'meeting_date' ? 'Meeting Date' : 'Upload Date'}
                                </span>
                                <i class="fas fa-exchange-alt text-[var(--text-muted)]"></i>
                            </button>
                            
                            <!-- Search Help -->
                            <div class="text-xs text-[var(--text-muted)] space-y-1">
                                <button @click="searchTipsExpanded = !searchTipsExpanded" class="flex items-center justify-between w-full text-left">
                                    <span>Search tips:</span>
                                    <i :class="['fas', 'fa-chevron-down', 'transition-transform', { 'rotate-180': searchTipsExpanded }]"></i>
                                </button>
                                <div v-if="searchTipsExpanded" class="pl-2 space-y-0.5 pt-1">
                                    <div>• <code class="bg-[var(--bg-tertiary)] px-1 rounded">date:today</code> - Today's recordings</div>
                                    <div>• <code class="bg-[var(--bg-tertiary)] px-1 rounded">date:2025-01</code> - January 2025</div>
                                    <div>• <code class="bg-[var(--bg-tertiary)] px-1 rounded">date:thisweek</code> - This week</div>
                                    <div>• <code class="bg-[var(--bg-tertiary)] px-1 rounded">tag:meeting</code> - Search by tag name</div>
                                    <div>• Click any tag to filter recordings</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Recordings List -->
                    <div class="flex-1 overflow-y-auto p-4" 
                         @scroll="(e) => {
                            const element = e.target;
                            const threshold = 100; // Load more when 100px from bottom
                            if (element.scrollHeight - element.scrollTop - element.clientHeight < threshold) {
                                loadMoreRecordings();
                            }
                         }">
                        <div v-if="isLoadingRecordings && recordings.length === 0" class="text-center py-8">
                            <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                            <p class="mt-2 text-[var(--text-muted)]">Loading recordings...</p>
                        </div>
                        
                        <div v-else-if="recordings.length === 0 && !isLoadingRecordings" class="text-center py-8">
                            <i class="fas fa-microphone-slash text-3xl text-[var(--text-muted)] mb-3"></i>
                            <p class="text-[var(--text-muted)]">No recordings found</p>
                            <p v-if="searchQuery.trim()" class="text-sm text-[var(--text-muted)] mt-1">
                                Try adjusting your search or <button @click="searchQuery = ''" class="text-[var(--text-accent)] hover:underline">clear filters</button>
                            </p>
                        </div>
                        
                        <div v-if="recordings.length > 0" class="space-y-2">
                            <div v-for="group in groupedRecordings" :key="group.title" class="mb-6">
                                <h3 class="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wide mb-2">
                                    ${group.title}
                                </h3>
                                <div class="space-y-1">
                                    <div v-for="recording in group.items" 
                                         :key="recording.id"
                                         @click="selectRecording(recording)"
                                         :class="[
                                             'p-3 rounded-lg cursor-pointer transition-all duration-200 border',
                                             selectedRecording?.id === recording.id 
                                                 ? 'bg-[var(--bg-accent)] border-[var(--border-accent)]' 
                                                 : 'bg-[var(--bg-tertiary)] border-transparent hover:bg-[var(--bg-accent-hover)]'
                                         ]">
                                        <!-- Title and Status Row -->
                                        <div class="flex items-center justify-between mb-1">
                                            <h4 class="font-medium text-sm truncate flex-1 mr-2" :class="selectedRecording?.id === recording.id ? 'text-[var(--text-accent)]' : 'text-[var(--text-primary)]'">
                                                ${recording.title || 'Untitled Recording'}
                                            </h4>
                                            <div class="flex items-center gap-1 flex-shrink-0">
                                                <!-- Show Failed status for failed recordings -->
                                                <span v-if="recording.status === 'FAILED'" 
                                                      class="status-badge status-failed">
                                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                                    Failed
                                                </span>
                                                
                                                <!-- Show Processing status for non-completed recordings -->
                                                <span v-else-if="recording.status !== 'COMPLETED'" 
                                                      :class="getStatusClass(recording.status)" 
                                                      class="status-badge">
                                                    ${formatStatus(recording.status)}
                                                </span>
                                                
                                                <!-- For completed recordings, show highlight and inbox badges -->
                                                <template v-else>
                                                    <span v-if="recording.is_highlighted" 
                                                          @click.stop="toggleHighlight(recording)"
                                                          class="status-badge status-highlighted clickable-badge"
                                                          title="Remove from starred">
                                                        <i class="fas fa-star"></i>
                                                    </span>
                                                    <span v-if="recording.is_inbox" 
                                                          @click.stop="toggleInbox(recording)"
                                                          class="status-badge status-inbox clickable-badge"
                                                          title="Mark as read">
                                                        <i class="fas fa-inbox"></i>
                                                    </span>
                                                </template>
                                            </div>
                                        </div>

                                        <!-- Date -->
                                        <p class="text-xs text-[var(--text-muted)] mt-1 flex items-center">
                                            <i class="fas fa-calendar-alt mr-1.5 text-[var(--text-muted)]" style="font-size: 10px;"></i>
                                            ${formatDisplayDate(sortBy === 'meeting_date' ? recording.meeting_date : recording.created_at)}
                                        </p>

                                        <!-- Participants -->
                                        <div v-if="recording.participants" class="text-xs text-[var(--text-muted)] mt-1 flex items-start">
                                            <i class="fas fa-users mr-1.5 text-[var(--text-muted)] flex-shrink-0" style="font-size: 10px; margin-top: 2px;"></i>
                                            <span class="truncate">
                                                ${recording.participants}
                                            </span>
                                        </div>

                                        <!-- Tags -->
                                        <div v-if="getRecordingTags(recording).length > 0" class="flex flex-wrap gap-1 mt-1">
                                            <button v-for="tag in getRecordingTags(recording).slice(0, 2)" :key="tag.id"
                                                    @click.stop="filterByTag(tag)"
                                                    class="inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium text-white hover:opacity-80 transition-opacity cursor-pointer"
                                                    :style="{ backgroundColor: tag.color }"
                                                    :title="'Filter by ' + tag.name">
                                                <span v-text="tag.name"></span>
                                            </button>
                                            <span v-if="getRecordingTags(recording).length > 2" 
                                                  class="inline-flex items-center px-1.5 py-0.5 rounded-md text-xs text-[var(--text-muted)]"
                                                  :title="getRecordingTags(recording).slice(2).map(t => t.name).join(', ')">
                                                +${getRecordingTags(recording).length - 2} more
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Load More Indicator -->
                            <div v-if="isLoadingMore" class="text-center py-4">
                                <i class="fas fa-spinner fa-spin text-lg text-[var(--text-muted)]"></i>
                                <p class="text-sm text-[var(--text-muted)] mt-1">Loading more recordings...</p>
                            </div>
                            
                            <!-- End of Results Indicator -->
                            <div v-else-if="!hasNextPage && totalRecordings > 0" class="text-center py-4 text-xs text-[var(--text-muted)]">
                                <i class="fas fa-check-circle mr-1"></i>
                                All recordings loaded
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- Main Content -->
            <main class="main-content" 
                  :class="{ 'sidebar-open': !isSidebarCollapsed }">

                <div class="flex-1 flex flex-col overflow-hidden">
                <!-- Upload View -->
                <div v-if="currentView === 'upload'" class="flex-1 flex items-center justify-center p-4 md:p-8 overflow-y-auto">
                    <div class="max-w-lg w-full my-auto">
                        <div class="text-center mb-8">
                            <i class="fas fa-microphone text-5xl md:text-6xl text-[var(--text-accent)] mb-4"></i>
                            <h2 class="text-2xl md:text-3xl font-bold mb-2">Upload or Record Audio</h2>
                            <p class="text-[var(--text-muted)]">Drag and drop an audio file, click to browse, or start a new recording.</p>
                        </div>
                        
                        <div class="bg-[var(--bg-secondary)] p-6 rounded-xl border border-[var(--border-primary)]">
                            <!-- File Upload Area -->
                            <div @drop="handleDrop" @dragover="handleDragOver" @dragleave="handleDragLeave" @click="$refs.fileInput.click()"
                                 :class="['border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all duration-300', dragover ? 'border-[var(--border-accent)] bg-[var(--bg-accent)]' : 'border-[var(--border-secondary)] hover:border-[var(--border-accent)]']">
                                <i class="fas fa-cloud-upload-alt text-3xl text-[var(--text-muted)] mb-3"></i>
                                <p class="text-[var(--text-secondary)] mb-2">Click to upload or drag and drop</p>
                                <p class="text-xs text-[var(--text-muted)]">Supports MP3, WAV, M4A, MP4, MOV, AVI, AMR, and more</p>
                            </div>
                            <input ref="fileInput" type="file" @change="handleFileSelect" accept="audio/*,video/mp4,video/quicktime,video/x-msvideo,video/webm,.mp4,.mov,.avi,.mkv,.webm" multiple class="hidden">

                            <!-- Divider -->
                            <div class="my-6 flex items-center">
                                <div class="flex-grow border-t border-[var(--border-secondary)]"></div>
                                <span class="flex-shrink mx-4 text-xs text-[var(--text-muted)] uppercase">Or</span>
                                <div class="flex-grow border-t border-[var(--border-secondary)]"></div>
                            </div>

                            <!-- Audio Recording Options -->
                            <div class="space-y-3">
                                <h3 class="text-sm font-medium text-[var(--text-secondary)] text-center">Recording Options</h3>
                                
                                <!-- Microphone Recording -->
                                <button @click="startRecording('microphone')"
                                        class="w-full px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center justify-center gap-2">
                                    <i class="fas fa-microphone"></i>
                                    <span>Record Microphone</span>
                                </button>
                                
                                <!-- System Audio Recording -->
                                <button @click="startRecording('system')"
                                        v-if="canRecordSystemAudio"
                                        class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
                                    <i class="fas fa-desktop"></i>
                                    <span>Record System Audio</span>
                                </button>
                                
                                <!-- Both Audio Sources -->
                                <button @click="startRecording('both')"
                                        v-if="canRecordSystemAudio"
                                        class="w-full px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center justify-center gap-2">
                                    <i class="fas fa-microphone"></i>
                                    <i class="fas fa-desktop ml-1"></i>
                                    <span>Record Both</span>
                                </button>
                                
                                <!-- Help Text -->
                                <div class="text-xs text-[var(--text-muted)] space-y-1 mt-3">
                                    <div class="flex items-center justify-between">
                                        <span><strong>Microphone:</strong> Records your voice only</span>
                                        <i class="fas fa-microphone text-red-500 flex-shrink-0"></i>
                                    </div>
                                    <div v-if="canRecordSystemAudio" class="flex items-center justify-between">
                                        <span><strong>System Audio:</strong> Records meeting participants and system sounds</span>
                                        <i class="fas fa-desktop text-blue-500 flex-shrink-0"></i>
                                    </div>
                                    <div v-if="canRecordSystemAudio" class="flex items-center justify-between">
                                        <span><strong>Both:</strong> Records your voice + meeting participants (recommended for online meetings)</span>
                                        <div class="flex items-center gap-1 flex-shrink-0">
                                            <i class="fas fa-microphone text-purple-500"></i>
                                            <i class="fas fa-desktop text-purple-500"></i>
                                        </div>
                                    </div>
                                    <div v-if="!canRecordSystemAudio" class="text-amber-600 dark:text-amber-400">
                                        <i class="fas fa-exclamation-triangle mr-1"></i>
                                        System audio recording not supported in this browser
                                        <button @click="showSystemAudioHelp = true" class="ml-2 text-blue-500 hover:text-blue-600 underline text-sm">
                                            Help
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Tag Selection -->
                            <div class="mt-4">
                                <label class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                                    <i class="fas fa-tags mr-1 text-[var(--text-muted)]"></i>
                                    Tags (Optional)
                                </label>
                                
                                <!-- Selected Tags Display -->
                                <div v-if="selectedTags.length > 0" class="mb-2 p-2 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)]">
                                    <div class="flex flex-wrap gap-1">
                                        <span v-for="(tag, index) in selectedTags" :key="tag.id" 
                                              class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-white"
                                              :style="{ backgroundColor: tag.color }">
                                            <span class="mr-1">${index + 1}.</span>
                                            <span>${tag.name}</span>
                                            <button @click="removeTagFromSelection(tag.id)" 
                                                    class="ml-1 hover:bg-black hover:bg-opacity-20 rounded-full w-4 h-4 flex items-center justify-center">
                                                <i class="fas fa-times text-xs"></i>
                                            </button>
                                        </span>
                                    </div>
                                    <p class="text-xs text-[var(--text-muted)] mt-1">
                                        <i class="fas fa-info-circle mr-1"></i>
                                        Tags are ordered by priority - first tag's settings take precedence
                                    </p>
                                </div>
                                
                                <!-- Tag Selection Dropdown -->
                                <select @change="(e) => { if(e.target.value) { addTagToSelection(parseInt(e.target.value)); e.target.value = ''; } }"
                                        class="w-full px-3 py-2 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                                    <option value="">Select tag to add...</option>
                                    <option v-for="tag in availableTags.filter(tag => !selectedTagIds.includes(tag.id))" 
                                            :key="tag.id" :value="tag.id" v-text="tag.name">
                                    </option>
                                </select>
                                
                                <p v-if="selectedTags.some(tag => tag.custom_prompt)" class="text-xs text-[var(--text-muted)] mt-1">
                                    <i class="fas fa-info-circle mr-1 text-[var(--text-accent)]"></i>
                                    Selected tags include custom summary prompts
                                </p>
                                <p v-if="selectedTags.length > 0 && useAsrEndpoint && selectedTags.some(tag => tag.default_language || tag.default_min_speakers || tag.default_max_speakers)" 
                                   class="text-xs text-[var(--text-muted)] mt-1">
                                    <i class="fas fa-cog mr-1 text-[var(--text-accent)]"></i>
                                    First tag's ASR settings will be applied: ${selectedTags[0].name}
                                </p>
                            </div>

                            <!-- Advanced Options for ASR (collapsible) -->
                            <div v-if="useAsrEndpoint" class="mt-4">
                                <button @click="showAdvancedOptions = !showAdvancedOptions" 
                                        class="w-full flex items-center justify-between px-3 py-2 bg-[var(--bg-tertiary)] rounded-md hover:bg-[var(--bg-accent)] transition-colors text-xs font-medium">
                                    <span class="flex items-center gap-2 text-[var(--text-secondary)]">
                                        <i class="fas fa-cog text-[var(--text-muted)]"></i>
                                        <span>Advanced ASR Options</span>
                                    </span>
                                    <i :class="['fas text-[var(--text-muted)]', showAdvancedOptions ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
                                </button>
                                
                                <div v-show="showAdvancedOptions" class="mt-2 p-3 bg-[var(--bg-tertiary)] rounded-md space-y-3 border border-[var(--border-secondary)]">
                                    <!-- Language Selection -->
                                    <div>
                                        <label class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                            Transcription Language
                                        </label>
                                        <select v-model="uploadLanguage" 
                                                class="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                            <option value="">Auto-detect</option>
                                            <option value="en">English</option>
                                            <option value="es">Spanish</option>
                                            <option value="fr">French</option>
                                            <option value="de">German</option>
                                            <option value="it">Italian</option>
                                            <option value="pt">Portuguese</option>
                                            <option value="nl">Dutch</option>
                                            <option value="ru">Russian</option>
                                            <option value="zh">Chinese</option>
                                            <option value="ja">Japanese</option>
                                            <option value="ko">Korean</option>
                                            <option value="ar">Arabic</option>
                                            <option value="hi">Hindi</option>
                                        </select>
                                    </div>
                                    
                                    <!-- Speaker Settings -->
                                    <div class="grid grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                                Min Speakers
                                            </label>
                                            <input v-model.number="uploadMinSpeakers" 
                                                   type="number" 
                                                   min="1" 
                                                   max="20"
                                                   class="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                        </div>
                                        <div>
                                            <label class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                                Max Speakers
                                            </label>
                                            <input v-model.number="uploadMaxSpeakers" 
                                                   type="number" 
                                                   min="1" 
                                                   max="20"
                                                   class="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                        </div>
                                    </div>
                                    
                                    <p class="text-xs text-[var(--text-muted)] pt-1">
                                        <i class="fas fa-info-circle mr-1 text-[var(--text-accent)]"></i>
                                        Settings apply to all files in this session
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recording View -->
                <div v-else-if="currentView === 'recording'" class="flex-1 flex flex-col p-4 md:p-8 bg-[var(--bg-primary)] min-h-0 overflow-y-auto">
                    <div class="flex-1 flex flex-col max-w-4xl w-full mx-auto bg-[var(--bg-secondary)] rounded-xl border border-[var(--border-primary)] min-h-0">
                        <!-- Top: Visualizer and Status -->
                        <div class="flex-shrink-0 p-4 md:p-6 text-center bg-[var(--bg-tertiary)] border-b border-[var(--border-primary)]">
                            <div v-if="isRecording" class="w-full mx-auto mb-4">
                                <!-- Dual visualizer for 'both' mode -->
                                <div v-if="recordingMode === 'both'" class="max-w-4xl mx-auto flex gap-4">
                                    <div class="w-1/2 h-32 md:h-40 flex flex-col bg-[var(--bg-primary)] rounded-lg p-2">
                                        <div class="flex-1 w-full overflow-hidden rounded-md">
                                            <canvas ref="micVisualizer" class="w-full h-full"></canvas>
                                        </div>
                                        <p class="text-xs text-[var(--text-muted)] pt-1">Microphone</p>
                                    </div>
                                    <div class="w-1/2 h-32 md:h-40 flex flex-col bg-[var(--bg-primary)] rounded-lg p-2">
                                        <div class="flex-1 w-full overflow-hidden rounded-md">
                                            <canvas ref="systemVisualizer" class="w-full h-full"></canvas>
                                        </div>
                                        <p class="text-xs text-[var(--text-muted)] pt-1">System Audio</p>
                                    </div>
                                </div>
                                <!-- Single visualizer for other modes -->
                                <div v-else class="h-32 md:h-40 max-w-2xl mx-auto bg-[var(--bg-primary)] rounded-lg p-2 flex flex-col">
                                    <div class="flex-1 w-full overflow-hidden rounded-md">
                                        <canvas ref="visualizer" class="w-full h-full"></canvas>
                                    </div>
                                    <p class="text-xs text-[var(--text-muted)] pt-1 capitalize">${recordingMode}</p>
                                </div>
                            </div>
                            <div v-if="!isRecording && audioBlobURL" class="h-24 md:h-32 w-full flex items-center justify-center mb-4">
                                <audio :src="audioBlobURL" controls class="w-full max-w-md"></audio>
                            </div>
                            <div>
                                <div class="text-2xl font-mono text-[var(--text-accent)]">${formatTime(recordingTime)}</div>
                                <p class="text-sm text-[var(--text-muted)]">${ isRecording ? 'Recording in progress...' : 'Recording finished' }</p>
                                <!-- Real-time file size display -->
                                <div v-if="isRecording && estimatedFileSize > 0" class="mt-2">
                                    <p class="text-xs text-[var(--text-muted)]">
                                        Estimated size: <span class="font-mono">${formatFileSize(estimatedFileSize)}</span>
                                        <span v-if="actualBitrate > 0" class="ml-2">
                                            (${Math.round(actualBitrate / 1000)}kbps)
                                        </span>
                                    </p>
                                    <!-- Size warning indicator -->
                                    <div v-if="estimatedFileSize > (maxRecordingMB * 1024 * 1024 * 0.8)" class="mt-1">
                                        <div class="flex items-center text-xs text-amber-600 dark:text-amber-400">
                                            <i class="fas fa-exclamation-triangle mr-1"></i>
                                            <span>Approaching ${maxRecordingMB}MB limit</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Middle: Notepad -->
                        <div class="flex-1 p-4 md:p-6 min-h-0 overflow-hidden flex flex-col">
                            <label for="recordingNotes" class="block text-sm font-medium text-[var(--text-secondary)] mb-2 flex-shrink-0">
                                <i class="fas fa-pencil-alt mr-1"></i>
                                Recording Notes (Markdown)
                            </label>
                            <div class="flex-1 min-h-0 recording-notes-editor">
                                <textarea ref="recordingNotesEditor" v-model="recordingNotes"
                                          class="w-full h-full bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg p-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] resize-none"
                                          placeholder="Type your notes in Markdown format..."
                                          rows="10"></textarea>
                            </div>
                        </div>
                        
                        <!-- Bottom: Action Buttons -->
                        <div class="flex-shrink-0 p-4 md:p-6 bg-[var(--bg-tertiary)] border-t border-[var(--border-primary)]">
                            <div v-if="isRecording" class="text-center">
                                <button @click="stopRecording"
                                        class="px-8 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors animate-pulse">
                                    <i class="fas fa-stop mr-2"></i>Stop Recording
                                </button>
                            </div>
                            <div v-if="!isRecording && audioBlobURL" class="flex flex-col gap-4">
                                <!-- Tag Selection -->
                                <div>
                                    <label for="recordingTagSelect" class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                                        <i class="fas fa-tags mr-1"></i>
                                        Select Tags (optional, in priority order)
                                    </label>
                                    
                                    <!-- Selected Tags Display -->
                                    <div v-if="selectedTags.length > 0" class="mb-2 p-2 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)]">
                                        <div class="flex flex-wrap gap-1">
                                            <span v-for="(tag, index) in selectedTags" :key="tag.id" 
                                                  class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-white"
                                                  :style="{ backgroundColor: tag.color }">
                                                <span class="mr-1">${index + 1}.</span>
                                                <span>${tag.name}</span>
                                                <button @click="removeTagFromSelection(tag.id)" 
                                                        class="ml-1 hover:bg-black hover:bg-opacity-20 rounded-full w-4 h-4 flex items-center justify-center">
                                                    <i class="fas fa-times text-xs"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <!-- Tag Dropdown -->
                                    <select @change="(e) => { if(e.target.value) { addTagToSelection(parseInt(e.target.value)); e.target.value = ''; } }"
                                            class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] text-sm">
                                        <option value="">Select tag to add...</option>
                                        <option v-for="tag in availableTags.filter(tag => !selectedTagIds.includes(tag.id))" 
                                                :key="tag.id" :value="tag.id" v-text="tag.name">
                                        </option>
                                    </select>
                                    
                                    <p v-if="selectedTags.some(tag => tag.custom_prompt)" class="text-xs text-[var(--text-muted)] mt-1">
                                        <i class="fas fa-info-circle mr-1 text-[var(--text-accent)]"></i>
                                        Selected tags include custom summary prompts
                                    </p>
                                    <p v-if="selectedTags.length > 0 && useAsrEndpoint && selectedTags.some(tag => tag.default_language || tag.default_min_speakers || tag.default_max_speakers)" 
                                       class="text-xs text-[var(--text-muted)] mt-1">
                                        <i class="fas fa-cog mr-1 text-[var(--text-accent)]"></i>
                                        First tag's ASR settings will be applied: ${selectedTags[0].name}
                                    </p>
                                </div>

                                <!-- Advanced Options for ASR (collapsible) -->
                                <div v-if="useAsrEndpoint">
                                    <button @click="showAdvancedOptions = !showAdvancedOptions" 
                                            class="w-full flex items-center justify-between px-3 py-2 bg-[var(--bg-tertiary)] rounded-md hover:bg-[var(--bg-accent)] transition-colors text-xs font-medium">
                                        <span class="flex items-center gap-2 text-[var(--text-secondary)]">
                                            <i class="fas fa-cog text-[var(--text-muted)]"></i>
                                            <span>Advanced ASR Options</span>
                                        </span>
                                        <i :class="['fas text-[var(--text-muted)]', showAdvancedOptions ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
                                    </button>
                                    
                                    <div v-if="showAdvancedOptions" class="mt-2 p-3 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)] space-y-3">
                                        <div>
                                            <label for="recordingAsrLanguage" class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                                Language
                                            </label>
                                            <select id="recordingAsrLanguage" v-model="asrLanguage"
                                                    class="w-full px-2 py-1 bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)] text-xs">
                                                <option value="">Auto-detect</option>
                                                <option value="en">English</option>
                                                <option value="es">Spanish</option>
                                                <option value="fr">French</option>
                                                <option value="de">German</option>
                                                <option value="it">Italian</option>
                                                <option value="pt">Portuguese</option>
                                                <option value="nl">Dutch</option>
                                                <option value="ru">Russian</option>
                                                <option value="zh">Chinese</option>
                                                <option value="ja">Japanese</option>
                                                <option value="ko">Korean</option>
                                            </select>
                                        </div>
                                        
                                        <div class="grid grid-cols-2 gap-3">
                                            <div>
                                                <label for="recordingAsrMinSpeakers" class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                                    Min Speakers
                                                </label>
                                                <input type="number" id="recordingAsrMinSpeakers" v-model="asrMinSpeakers"
                                                       min="1" max="20" placeholder="Auto"
                                                       class="w-full px-2 py-1 bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)] text-xs">
                                            </div>
                                            
                                            <div>
                                                <label for="recordingAsrMaxSpeakers" class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                                    Max Speakers
                                                </label>
                                                <input type="number" id="recordingAsrMaxSpeakers" v-model="asrMaxSpeakers"
                                                       min="1" max="20" placeholder="Auto"
                                                       class="w-full px-2 py-1 bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)] text-xs">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Upload/Discard Buttons -->
                                <div class="flex flex-col sm:flex-row gap-3 justify-center">
                                    <button @click="uploadRecordedAudio"
                                        class="flex-1 px-6 py-3 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors flex items-center justify-center gap-2">
                                    <i class="fas fa-upload"></i>
                                    <span>Upload Recording & Notes</span>
                                </button>
                                    <button @click="discardRecording"
                                            class="px-6 py-3 bg-[var(--bg-danger)] text-white rounded-lg hover:bg-[var(--bg-danger-hover)] transition-colors flex items-center justify-center gap-2">
                                        <i class="fas fa-trash"></i>
                                        <span>Discard</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recording Detail View -->
                <div v-else-if="currentView === 'detail' && selectedRecording" class="flex-1 flex flex-col overflow-hidden">
                    <!-- Mobile View -->
                    <div v-if="isMobileScreen" class="flex-1 flex flex-col overflow-hidden">
                        <!-- Mobile Header -->
                        <div class="bg-[var(--bg-secondary)] border-b border-[var(--border-primary)] p-4 flex-shrink-0">
                            <div @click="isMetadataExpanded = !isMetadataExpanded" class="cursor-pointer">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1 min-w-0">
                                        <h1 class="text-lg font-bold text-[var(--text-primary)] truncate">
                                            ${selectedRecording.title || 'Untitled Recording'}
                                        </h1>
                                        <p class="text-sm text-[var(--text-muted)] truncate">
                                            ${selectedRecording.participants || 'No participants'}
                                        </p>
                                        <div v-if="getRecordingTags(selectedRecording).length > 0" class="flex flex-wrap gap-1 mt-2">
                                            <button v-for="tag in getRecordingTags(selectedRecording)" :key="tag.id" 
                                                    @click="filterByTag(tag)"
                                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-white hover:opacity-80 transition-opacity cursor-pointer"
                                                    :style="{ backgroundColor: tag.color }"
                                                    :title="'Filter by ' + tag.name">
                                                <i class="fas fa-tag mr-1"></i>
                                                <span v-text="tag.name"></span>
                                            </button>
                                        </div>
                                    </div>
                                    <i :class="['fas', 'fa-chevron-down', 'transition-transform', { 'rotate-180': isMetadataExpanded }]"></i>
                                </div>
                            </div>
                            <!-- Expandable Metadata and Actions -->
                            <div v-if="isMetadataExpanded" class="mt-4 space-y-4">
                                <div class="space-y-2 text-sm text-[var(--text-muted)]">
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-calendar text-[var(--text-accent)]"></i>
                                        <span>${selectedRecording.meeting_date ? formatDisplayDate(selectedRecording.meeting_date) : 'No date set'}</span>
                                    </div>
                                    <div v-if="activeRecordingMetadata" class="flex flex-wrap items-center gap-x-4 gap-y-2">
                                        <span v-for="(item, index) in activeRecordingMetadata" :key="index" class="flex items-center gap-1.5">
                                            <i :class="item.icon"></i>
                                            <span :title="item.fullText || item.text">${item.text}</span>
                                        </span>
                                    </div>
                                    <div v-if="selectedRecording.status !== 'COMPLETED'" class="flex items-center gap-2">
                                        <span :class="getStatusClass(selectedRecording.status)" class="status-badge">
                                            ${formatStatus(selectedRecording.status)}
                                        </span>
                                    </div>
                                </div>
                                <!-- Action Buttons -->
                                <div class="flex items-center gap-2 overflow-x-auto pb-2">
                                    <button @click="toggleInbox(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :class="selectedRecording.is_inbox ? 'text-blue-500' : ''" :title="selectedRecording.is_inbox ? 'Mark as Read' : 'Move to Inbox'"><i class="fas fa-inbox"></i></button>
                                    <button @click="toggleHighlight(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :class="selectedRecording.is_highlighted ? 'text-yellow-500' : ''" :title="selectedRecording.is_highlighted ? 'Remove Highlight' : 'Highlight'"><i class="fas fa-star"></i></button>
                                    <button @click="editRecording(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" title="Edit Recording"><i class="fas fa-edit"></i></button>
                                    <button @click="editRecordingTags(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" title="Edit Tags"><i class="fas fa-tags"></i></button>
                                    <button @click="reprocessTranscription(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :title="useAsrEndpoint ? 'Reprocess with ASR' : 'Reprocess transcription'"><i class="fas fa-redo-alt"></i></button>
                                        <button @click="reprocessSummary(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" title="Reprocess summary"><i class="fas fa-sync-alt"></i></button>
                                        <button @click="confirmReset(selectedRecording)" v-if="['PROCESSING', 'SUMMARIZING', 'FAILED'].includes(selectedRecording.status)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors text-orange-500" title="Reset stuck processing"><i class="fas fa-undo"></i></button>
                                    <button @click="openSpeakerModal" v-if="selectedRecording.transcription && useAsrEndpoint" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" title="Identify Speakers"><i class="fas fa-user-tag"></i></button>
                                    <button @click="openShareModal(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" title="Share Recording"><i class="fas fa-share-alt"></i></button>
                                    <button @click="confirmDelete(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-danger-light)] text-[var(--text-danger)] transition-colors"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </div>

                        <!-- Mobile Audio Player -->
                        <div class="bg-[var(--bg-secondary)] p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                            <div class="audio-player-container">
                                <audio controls 
                                       :src="'/audio/' + selectedRecording.id" 
                                       :volume="playerVolume"
                                       @volumechange="onPlayerVolumeChange"
                                       class="w-full">
                                    Your browser does not support the audio element.
                                </audio>
                            </div>
                        </div>

                        <!-- Mobile Tab Navigation -->
                        <div class="flex-shrink-0 bg-[var(--bg-tertiary)] border-b border-[var(--border-primary)] flex overflow-x-auto">
                            <button @click="mobileTab = 'transcript'" :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'transcript' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']">Transcript</button>
                            <button @click="mobileTab = 'summary'" :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'summary' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']">Summary</button>
                            <button @click="mobileTab = 'notes'" :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'notes' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']">Notes</button>
                            <button @click="mobileTab = 'chat'" :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'chat' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']">Chat</button>
                        </div>

                        <!-- Mobile Tab Content -->
                        <div class="flex-1 overflow-y-auto p-4">
                            <!-- Transcript Panel -->
                            <div v-if="mobileTab === 'transcript'" class="h-full flex flex-col space-y-4">
                                <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                    <div v-if="processedTranscription.hasDialogue" class="view-mode-toggle">
                                        <button @click="toggleTranscriptionViewMode" :class="['toggle-button', transcriptionViewMode === 'simple' ? 'active' : '']"><i class="fas fa-list"></i></button>
                                        <button @click="toggleTranscriptionViewMode" :class="['toggle-button', transcriptionViewMode === 'bubble' ? 'active' : '']"><i class="fas fa-comments"></i></button>
                                    </div>
                                    <button @click="copyTranscription" class="copy-btn"><i class="fas fa-copy"></i></button>
                                    <button @click="openTranscriptionEditor" v-if="selectedRecording && selectedRecording.transcription" class="copy-btn"><i class="fas fa-edit"></i></button>
                                </div>
                                <div class="flex-grow overflow-y-auto mobile-content-box">
                                    <div v-if="selectedRecording.status === 'PROCESSING'" class="text-center py-8">
                                        <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                        <p class="mt-2 text-[var(--text-muted)]">Processing transcription...</p>
                                    </div>
                                    <div v-else-if="!selectedRecording.transcription" class="text-center py-8">
                                        <i class="fas fa-file-text text-3xl text-[var(--text-muted)] mb-3"></i>
                                        <p class="text-[var(--text-muted)]">No transcription available</p>
                                    </div>
                                    <div v-else>
                                        <div v-if="!processedTranscription.hasDialogue || transcriptionViewMode === 'simple'" class="transcription-simple-view">
                                            <div v-if="processedTranscription.hasDialogue">
                                                <div v-for="segment in processedTranscription.simpleSegments" :key="segment.startTime || Math.random()" class="speaker-segment" @click="seekAudioFromEvent" :data-start-time="segment.startTime">
                                                    <div v-if="segment.showSpeaker" :class="['speaker-tablet', segment.color]">${segment.speaker}</div>
                                                    <div class="speaker-text">${segment.sentence}</div>
                                                </div>
                                            </div>
                                            <div v-else>
                                                <div v-if="processedTranscription.simpleSegments && processedTranscription.simpleSegments.length > 0">
                                                    <div v-for="segment in processedTranscription.simpleSegments" :key="segment.startTime || Math.random()" class="transcript-segment cursor-pointer hover:bg-[var(--bg-accent-hover)] p-2 rounded transition-colors" @click="seekAudioFromEvent" :data-start-time="segment.startTime">${segment.sentence}</div>
                                                </div>
                                                <div v-else class="whitespace-pre-wrap">${processedTranscription.content}</div>
                                            </div>
                                        </div>
                                        <div v-else-if="transcriptionViewMode === 'bubble'" class="transcription-with-speakers">
                                            <div v-for="(row, rowIndex) in processedTranscription.bubbleRows" :key="`${selectedRecording.id}-bubble-row-${rowIndex}`" :class="['bubble-row', row.isMe ? 'speaker-me' : '']">
                                                <div v-for="bubble in row.bubbles" :key="bubble.startTime || Math.random()" :class="['speaker-bubble', bubble.color, row.isMe ? 'speaker-me' : '']" @click="seekAudioFromEvent" :data-start-time="bubble.startTime">
                                                    <div class="speaker-bubble-content">${bubble.sentence}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Summary Panel -->
                            <div v-if="mobileTab === 'summary'" class="h-full flex flex-col space-y-4">
                                <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                    <button @click="copySummary" class="copy-btn" title="Copy Summary"><i class="fas fa-copy"></i></button>
                                    <button @click="downloadSummary" class="copy-btn" title="Download as Word"><i class="fas fa-download"></i></button>
                                    <button @click="toggleEditSummary" class="copy-btn" title="Edit Summary"><i class="fas fa-edit"></i></button>
                                </div>
                                <div class="flex-grow overflow-y-auto mobile-content-box">
                                    <div v-if="editingSummary" class="h-full flex flex-col">
                                        <div class="markdown-editor-container flex-1">
                                            <textarea ref="summaryMarkdownEditor" v-model="selectedRecording.summary"></textarea>
                                        </div>
                                        <div class="flex justify-end gap-2 mt-2">
                                            <button @click="cancelEditSummary" class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]">Cancel</button>
                                            <button @click="saveEditSummary" class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]">Save</button>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <div v-if="selectedRecording.status === 'SUMMARIZING'" class="text-center py-8">
                                            <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                            <p class="mt-2 text-[var(--text-muted)]">Generating summary...</p>
                                        </div>
                                        <div v-else-if="!selectedRecording.summary" class="text-center py-8">
                                            <i class="fas fa-file-alt text-3xl text-[var(--text-muted)] mb-3"></i>
                                            <p class="text-[var(--text-muted)] mb-4">No summary available</p>
                                            <button @click="generateSummary" 
                                                    class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105">
                                                <i class="fas fa-magic mr-2"></i>Generate Summary
                                            </button>
                                        </div>
                                        <div v-else class="summary-box h-full" v-html="selectedRecording.summary_html || selectedRecording.summary"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- Notes Panel -->
                            <div v-if="mobileTab === 'notes'" class="h-full flex flex-col space-y-4">
                                <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                    <button @click="copyNotes" class="copy-btn" title="Copy Notes"><i class="fas fa-copy"></i></button>
                                    <button @click="downloadNotes" class="copy-btn" title="Download as Word"><i class="fas fa-download"></i></button>
                                    <button @click="toggleEditNotes" class="copy-btn" title="Edit Notes"><i class="fas fa-edit"></i></button>
                                </div>
                                <div class="flex-grow overflow-y-auto mobile-content-box">
                                    <div v-if="editingNotes" class="h-full flex flex-col">
                                        <div class="markdown-editor-container flex-1">
                                            <textarea ref="notesMarkdownEditor" v-model="selectedRecording.notes"></textarea>
                                        </div>
                                        <div class="flex justify-end gap-2 mt-2">
                                            <button @click="cancelEditNotes" class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]">Cancel</button>
                                            <button @click="saveEditNotes" class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]">Save</button>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <div v-if="!selectedRecording.notes" class="text-center py-8">
                                            <i class="fas fa-sticky-note text-3xl text-[var(--text-muted)] mb-3"></i>
                                            <p class="text-[var(--text-muted)]">No notes available</p>
                                        </div>
                                        <div v-else class="notes-box h-full" v-html="selectedRecording.notes_html || selectedRecording.notes"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- Chat Panel -->
                            <div v-if="mobileTab === 'chat'" class="h-full flex flex-col rounded-lg border border-[var(--border-primary)] overflow-hidden">
                                <div ref="chatMessagesRef" class="flex-1 overflow-y-auto p-4 space-y-4 bg-[var(--bg-secondary)]">
                                    <div v-if="chatMessages.length === 0" class="text-center py-8">
                                        <i class="fas fa-robot text-3xl text-[var(--text-muted)] mb-3"></i>
                                        <p class="text-[var(--text-muted)]">Ask questions about this transcription</p>
                                    </div>
                                    <div v-for="(message, index) in chatMessages" :key="index" :class="['message', message.role === 'user' ? 'user-message ml-auto' : 'ai-message']">
                                        <div v-if="message.html" v-html="message.html"></div>
                                        <div v-else class="whitespace-pre-wrap">${message.content}</div>
                                    </div>
                                    <div v-if="isChatLoading" class="ai-message">
                                        <i class="fas fa-spinner fa-spin mr-2"></i> Thinking...
                                    </div>
                                </div>
                                <div class="border-t border-[var(--border-primary)] p-4 bg-[var(--bg-tertiary)]">
                                    <div class="flex gap-2">
                                        <textarea v-model="chatInput" @keydown="handleChatKeydown" :disabled="isChatLoading || selectedRecording.status !== 'COMPLETED'" placeholder="Ask about this transcription..." class="flex-1 px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] text-sm" rows="2"></textarea>
                                        <button @click="sendChatMessage" :disabled="!chatInput.trim() || isChatLoading || selectedRecording.status !== 'COMPLETED'" class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                                            <i class="fas fa-paper-plane"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Desktop View -->
                    <div v-else class="flex-1 flex flex-col overflow-hidden">
                        <!-- Recording Header -->
                        <div class="bg-[var(--bg-secondary)] border-b border-[var(--border-primary)] p-6 flex-shrink-0">
                            <div class="flex flex-col">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1 min-w-0">
                                        <h1 class="text-2xl font-bold text-[var(--text-primary)] mb-2">
                                            ${selectedRecording.title || 'Untitled Recording'}
                                        </h1>
                                    </div>
                                    
                                    <!-- Action Buttons -->
                                    <div class="flex items-center gap-2 ml-4">
                                        <button @click="toggleInbox(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :class="selectedRecording.is_inbox ? 'text-blue-500' : ''"
                                                :title="selectedRecording.is_inbox ? 'Mark as Read' : 'Move to Inbox'">
                                            <i class="fas fa-inbox"></i>
                                        </button>
                                        <button @click="toggleHighlight(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :class="selectedRecording.is_highlighted ? 'text-yellow-500' : ''"
                                                :title="selectedRecording.is_highlighted ? 'Remove Highlight' : 'Highlight'">
                                            <i class="fas fa-star"></i>
                                        </button>
                                        <button @click="editRecording(selectedRecording)" 
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button @click="editRecordingTags(selectedRecording)" 
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                title="Edit Tags">
                                            <i class="fas fa-tags"></i>
                                        </button>
                                        <button @click="reprocessTranscription(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="useAsrEndpoint ? 'Reprocess with ASR' : 'Reprocess transcription'">
                                            <i class="fas fa-redo-alt"></i>
                                        </button>
                                        <button @click="reprocessSummary(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                title="Reprocess summary">
                                            <i class="fas fa-sync-alt"></i>
                                        </button>
                                        <button @click="confirmReset(selectedRecording)" v-if="['PROCESSING', 'SUMMARIZING', 'FAILED'].includes(selectedRecording.status)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors text-orange-500"
                                                title="Reset stuck processing">
                                            <i class="fas fa-undo"></i>
                                        </button>
                                        <button @click="openSpeakerModal" v-if="selectedRecording.transcription && useAsrEndpoint"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                title="Identify Speakers">
                                            <i class="fas fa-user-tag"></i>
                                        </button>
                                        <button @click="openShareModal(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                title="Share Recording">
                                            <i class="fas fa-share-alt"></i>
                                        </button>
                                        <button @click="confirmDelete(selectedRecording)" 
                                                class="p-2 rounded-lg hover:bg-[var(--bg-danger-light)] text-[var(--text-danger)] transition-colors">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Metadata Row -->
                                <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-[var(--text-muted)] mt-2">
                                    <!-- Participants -->
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-users text-[var(--text-accent)]"></i>
                                        <span v-if="!editingParticipants" 
                                              @click="toggleEditParticipants"
                                              class="cursor-pointer hover:text-[var(--text-accent)] transition-colors">
                                            ${selectedRecording.participants || 'No participants'}
                                        </span>
                                        <input v-else 
                                               v-model="selectedRecording.participants" 
                                               @blur="toggleEditParticipants"
                                               @keyup.enter="toggleEditParticipants"
                                               class="bg-transparent border-b border-[var(--border-secondary)] focus:border-[var(--border-focus)] outline-none px-1">
                                    </div>
                                    
                                    <!-- Meeting Date -->
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-calendar text-[var(--text-accent)]"></i>
                                        <span v-if="!editingMeetingDate" 
                                              @click="toggleEditMeetingDate"
                                              class="cursor-pointer hover:text-[var(--text-accent)] transition-colors">
                                            ${selectedRecording.meeting_date ? formatDisplayDate(selectedRecording.meeting_date) : 'No date set'}
                                        </span>
                                        <input v-else 
                                               v-model="selectedRecording.meeting_date" 
                                               @blur="toggleEditMeetingDate"
                                               @keyup.enter="toggleEditMeetingDate"
                                               type="date"
                                               class="bg-transparent border-b border-[var(--border-secondary)] focus:border-[var(--border-focus)] outline-none px-1">
                                    </div>
                                    
                                    <!-- Other Metadata -->
                                    <div v-if="activeRecordingMetadata" class="flex flex-wrap items-center gap-x-6 gap-y-2">
                                        <span v-for="(item, index) in activeRecordingMetadata" :key="index" class="flex items-center gap-1.5">
                                            <i :class="item.icon"></i>
                                            <span :title="item.fullText || item.text">${item.text}</span>
                                        </span>
                                    </div>
                                    
                                    <!-- Status -->
                                    <div v-if="selectedRecording.status !== 'COMPLETED'" class="flex items-center gap-2">
                                        <span :class="getStatusClass(selectedRecording.status)" class="status-badge">
                                            ${formatStatus(selectedRecording.status)}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Main Content Split View -->
                        <div id="mainContentColumns" class="flex-1 flex overflow-hidden">
                            <!-- Left Panel: Transcription -->
                            <div id="leftMainColumn" class="flex flex-col overflow-hidden" :style="{width: leftColumnWidth + '%'}">
                                <!-- Transcription Header -->
                                <div class="bg-[var(--bg-tertiary)] px-4 py-3 border-b border-[var(--border-primary)] flex items-center justify-between">
                                    <h3 class="font-semibold flex items-center">
                                        <i class="fas fa-file-text mr-2"></i>
                                        Transcription
                                    </h3>
                                    <div class="flex items-center gap-2">
                                        <!-- View Mode Toggle -->
                                        <div v-if="processedTranscription.hasDialogue" class="view-mode-toggle">
                                            <button @click="toggleTranscriptionViewMode" 
                                                    :class="['toggle-button', transcriptionViewMode === 'simple' ? 'active' : '']">
                                                <i class="fas fa-list"></i>Simple
                                            </button>
                                            <button @click="toggleTranscriptionViewMode" 
                                                    :class="['toggle-button', transcriptionViewMode === 'bubble' ? 'active' : '']">
                                                <i class="fas fa-comments"></i>Bubble
                                            </button>
                                        </div>
                                        
                                        <!-- Copy Button -->
                                        <button @click="copyTranscription" 
                                                class="copy-btn">
                                            <i class="fas fa-copy mr-1"></i>Copy
                                        </button>
                                        <!-- Edit Transcription Button -->
                                        <button @click="openTranscriptionEditor"
                                                v-if="selectedRecording && selectedRecording.transcription"
                                                class="copy-btn">
                                            <i class="fas fa-edit mr-1"></i>Edit
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Transcription Content -->
                                <div class="flex-1 overflow-y-auto p-4">
                                    <div v-if="selectedRecording.status === 'PROCESSING'" class="text-center py-8">
                                        <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                        <p class="mt-2 text-[var(--text-muted)]">Processing transcription...</p>
                                    </div>
                                    
                                    <div v-else-if="!selectedRecording.transcription" class="text-center py-8">
                                        <i class="fas fa-file-text text-3xl text-[var(--text-muted)] mb-3"></i>
                                        <p class="text-[var(--text-muted)]">No transcription available</p>
                                    </div>
                                    
                                    <!-- Speaker Legend (for dialogue transcriptions in bubble view only) -->
                                    <div v-if="processedTranscription.hasDialogue && processedTranscription.speakers.length > 0 && transcriptionViewMode === 'bubble'" 
                                         :class="['speaker-legend', legendExpanded ? 'expanded' : '']">
                                        <div class="speaker-legend-header" @click="legendExpanded = !legendExpanded">
                                            <div class="speaker-legend-title">
                                                <i class="fas fa-users"></i>
                                                Speakers
                                                <span class="speaker-count-indicator">(${processedTranscription.speakers.length})</span>
                                            </div>
                                            <i class="fas fa-chevron-down speaker-legend-toggle"></i>
                                        </div>
                                        <div class="speaker-legend-content">
                                            <div v-for="(speaker, index) in processedTranscription.speakers" 
                                                 :key="`${selectedRecording.id}-speaker-legend-${index}`" 
                                                 :class="['speaker-legend-item', speaker.color]">
                                                <span class="speaker-name">${speaker.name}</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Transcription Display -->
                                    <div v-if="selectedRecording.transcription">
                                        <!-- Simple View -->
                                        <div v-if="!processedTranscription.hasDialogue || transcriptionViewMode === 'simple'" 
                                             class="transcription-simple-view">
                                            <div v-if="processedTranscription.hasDialogue">
                                                <div v-for="segment in processedTranscription.simpleSegments" 
                                                     :key="segment.startTime || Math.random()" 
                                                     class="speaker-segment"
                                                     @click="seekAudioFromEvent"
                                                     :data-start-time="segment.startTime">
                                                    <div v-if="segment.showSpeaker" 
                                                         :class="['speaker-tablet', segment.color]">
                                                        ${segment.speaker}
                                                    </div>
                                                    <div class="speaker-text">
                                                        ${segment.sentence}
                                                    </div>
                                                </div>
                                            </div>
                                            <div v-else>
                                                <div v-if="processedTranscription.simpleSegments && processedTranscription.simpleSegments.length > 0">
                                                    <div v-for="segment in processedTranscription.simpleSegments" 
                                                         :key="segment.startTime || Math.random()" 
                                                         class="transcript-segment cursor-pointer hover:bg-[var(--bg-accent-hover)] p-2 rounded transition-colors"
                                                         @click="seekAudioFromEvent"
                                                         :data-start-time="segment.startTime">
                                                        ${segment.sentence}
                                                    </div>
                                                </div>
                                                <div v-else class="whitespace-pre-wrap">
                                                    ${processedTranscription.content}
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Bubble View -->
                                        <div v-else-if="transcriptionViewMode === 'bubble'" 
                                             class="transcription-with-speakers">
                                            <div v-for="(row, rowIndex) in processedTranscription.bubbleRows" 
                                                 :key="`${selectedRecording.id}-bubble-row-${rowIndex}`" 
                                                 :class="['bubble-row', row.isMe ? 'speaker-me' : '']">
                                                <div v-for="bubble in row.bubbles" 
                                                     :key="bubble.startTime || Math.random()" 
                                                     :class="['speaker-bubble', bubble.color, row.isMe ? 'speaker-me' : '']"
                                                     @click="seekAudioFromEvent"
                                                     :data-start-time="bubble.startTime">
                                                    <div class="speaker-bubble-content">
                                                        ${bubble.sentence}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Resizable Divider - Minimal but functional -->
                            <div id="mainColumnResizer" @mousedown="startColumnResize"></div>

                            <!-- Right Panel: Summary/Notes and Chat -->
                            <div id="rightMainColumn" class="flex flex-col overflow-hidden" :style="{width: rightColumnWidth + '%'}">
                                <!-- Audio Player -->
                                <div class="bg-[var(--bg-secondary)] p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                                    <div class="audio-player-container">
                                        <audio controls 
                                               :src="'/audio/' + selectedRecording.id" 
                                               :volume="playerVolume"
                                               @volumechange="onPlayerVolumeChange"
                                               class="w-full">
                                            Your browser does not support the audio element.
                                        </audio>
                                    </div>
                                </div>

                                <!-- Summary/Notes Tabs -->
                                <div class="flex-1 flex flex-col overflow-hidden">
                                    <!-- Tab Navigation -->
                                    <div class="bg-[var(--bg-tertiary)] border-b border-[var(--border-primary)] flex">
                                        <button @click="selectedTab = 'summary'" 
                                                :class="[
                                                    'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                                                    selectedTab === 'summary' 
                                                        ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' 
                                                        : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
                                                ]">
                                            Summary
                                        </button>
                                        <button @click="selectedTab = 'notes'" 
                                                :class="[
                                                    'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                                                    selectedTab === 'notes' 
                                                        ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' 
                                                        : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
                                                ]">
                                            Notes
                                        </button>
                                    </div>

                                    <!-- Tab Content -->
                                    <div class="flex-1 overflow-hidden">
                                        <!-- Summary Tab -->
                                        <div v-if="selectedTab === 'summary'" class="h-full p-4 overflow-y-auto">
                                            <div v-if="selectedRecording.status === 'SUMMARIZING'" class="text-center py-8">
                                                <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                                <p class="mt-2 text-[var(--text-muted)]">Generating summary...</p>
                                            </div>
                                            
                                            <div v-else-if="!selectedRecording.summary" class="text-center py-8">
                                                <i class="fas fa-file-alt text-3xl text-[var(--text-muted)] mb-3"></i>
                                                <p class="text-[var(--text-muted)] mb-4">No summary available</p>
                                                <button @click="generateSummary" 
                                                        class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105">
                                                    <i class="fas fa-magic mr-2"></i>Generate Summary
                                                </button>
                                            </div>
                                            
                                            <div v-else class="content-box relative">
                                                <div v-if="!editingSummary" class="absolute top-2 right-4 flex gap-1 z-10">
                                                    <button @click="copySummary" 
                                                            title="Copy Summary"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-copy text-sm"></i>
                                                    </button>
                                                    <button @click="downloadSummary" 
                                                            title="Download Summary as Word Document"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-download text-sm"></i>
                                                    </button>
                                                    <button @click="toggleEditSummary" 
                                                            title="Edit Summary"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-edit text-sm"></i>
                                                    </button>
                                                </div>
                                                
                                                <div v-if="!editingSummary" 
                                                     class="summary-box" 
                                                     v-html="selectedRecording.summary_html || selectedRecording.summary">
                                                </div>
                                                <div v-else class="h-full flex flex-col">
                                                    <div class="markdown-editor-container flex-1">
                                                        <textarea ref="summaryMarkdownEditor" 
                                                                  v-model="selectedRecording.summary"
                                                                  class="w-full h-full p-4 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]"
                                                                  placeholder="Enter summary in Markdown format...">
                                                        </textarea>
                                                    </div>
                                                    <div class="flex justify-end gap-2 mt-2">
                                                        <button @click="cancelEditSummary" 
                                                                class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]">
                                                            Cancel
                                                        </button>
                                                        <button @click="saveEditSummary" 
                                                                class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]">
                                                            Save
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Notes Tab -->
                                        <div v-if="selectedTab === 'notes'" class="h-full p-4 overflow-y-auto">
                                            <div class="content-box h-full relative">
                                                <div v-if="!editingNotes" class="absolute top-2 right-4 flex gap-1 z-10">
                                                    <button @click="copyNotes" 
                                                            title="Copy Notes"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-copy text-sm"></i>
                                                    </button>
                                                    <button @click="downloadNotes" 
                                                            title="Download Notes as Word Document"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-download text-sm"></i>
                                                    </button>
                                                    <button @click="toggleEditNotes" 
                                                            title="Edit Notes"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-edit text-sm"></i>
                                                    </button>
                                                </div>
                                                
                                                <div v-if="!editingNotes" 
                                                     class="notes-box h-full">
                                                    <div v-if="selectedRecording.notes_html" 
                                                         v-html="selectedRecording.notes_html">
                                                    </div>
                                                    <div v-else-if="selectedRecording.notes" 
                                                         class="whitespace-pre-wrap">
                                                        ${selectedRecording.notes}
                                                    </div>
                                                    <div v-else class="text-[var(--text-muted)] italic">
                                                        Click to add notes...
                                                    </div>
                                                </div>
                                                
                                                <div v-else class="h-full flex flex-col">
                                                    <div class="markdown-editor-container flex-1">
                                                        <textarea ref="notesMarkdownEditor" 
                                                                  v-model="selectedRecording.notes"
                                                                  class="w-full h-full p-4 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]"
                                                                  placeholder="Enter notes in Markdown format...">
                                                        </textarea>
                                                    </div>
                                                    <div class="flex justify-end gap-2 mt-2">
                                                        <button @click="cancelEditNotes" 
                                                                class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]">
                                                            Cancel
                                                        </button>
                                                        <button @click="saveEditNotes" 
                                                                class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]">
                                                            Save
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Chat Section -->
                                <div class="border-t border-[var(--border-primary)] flex flex-col">
                                    <!-- Chat Toggle -->
                                    <button @click="showChat = !showChat" 
                                            class="bg-[var(--bg-tertiary)] px-4 py-3 text-left hover:bg-[var(--bg-accent-hover)] transition-colors flex items-center justify-between">
                                        <span class="font-medium flex items-center">
                                            <i class="fas fa-comments mr-2"></i>
                                            Chat with Transcription
                                        </span>
                                        <i :class="['fas transition-transform duration-200', showChat ? 'fa-chevron-down' : 'fa-chevron-up']"></i>
                                    </button>

                                    <!-- Chat Content -->
                                    <div v-if="showChat" class="flex-1 flex flex-col min-h-0 max-h-96">
                                        <!-- Chat Messages -->
                                        <div ref="chatMessagesRef" 
                                             class="flex-1 overflow-y-auto p-4 space-y-4 bg-[var(--bg-secondary)]">
                                            <div v-if="chatMessages.length === 0" class="text-center py-8">
                                                <i class="fas fa-robot text-3xl text-[var(--text-muted)] mb-3"></i>
                                                <p class="text-[var(--text-muted)]">Ask questions about this transcription</p>
                                            </div>
                                            
                                            <div v-for="(message, index) in chatMessages" 
                                                 :key="index" 
                                                 :class="[
                                                     'message',
                                                     message.role === 'user' ? 'user-message ml-auto' : 'ai-message'
                                                 ]">
                                                <div class="copyable" v-if="message.role === 'assistant'">
                                                    <button @click="copyMessage(message.content, $event)" 
                                                            class="copy-btn absolute top-2 right-2 opacity-0 group-hover:opacity-100">
                                                        <i class="fas fa-copy"></i>
                                                    </button>
                                                    <div v-if="message.html" v-html="message.html"></div>
                                                    <div v-else class="whitespace-pre-wrap">${message.content}</div>
                                                </div>
                                                <div v-else class="whitespace-pre-wrap">${message.content}</div>
                                            </div>
                                            
                                            <div v-if="isChatLoading" class="ai-message">
                                                <i class="fas fa-spinner fa-spin mr-2"></i>
                                                Thinking...
                                            </div>
                                        </div>

                                        <!-- Chat Input -->
                                        <div class="border-t border-[var(--border-primary)] p-4 bg-[var(--bg-tertiary)]">
                                            <div class="flex gap-2">
                                                <textarea v-model="chatInput" 
                                                          @keydown="handleChatKeydown"
                                                          :disabled="isChatLoading || selectedRecording.status !== 'COMPLETED'"
                                                          placeholder="Ask about this transcription... (Enter to send, Ctrl+Enter for new line)"
                                                          class="flex-1 px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] text-sm"
                                                          rows="2">
                                                </textarea>
                                                <button @click="sendChatMessage" 
                                                        :disabled="!chatInput.trim() || isChatLoading || selectedRecording.status !== 'COMPLETED'"
                                                        class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                                                    <i class="fas fa-paper-plane"></i>
                                                </button>
                                            </div>
                                            <p v-if="selectedRecording.status !== 'COMPLETED'" 
                                               class="text-xs text-[var(--text-muted)] mt-2">
                                                Chat will be available once transcription is complete
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Empty State -->
                <div v-else class="flex-1 flex items-center justify-center">
                    <div class="text-center">
                        <i class="fas fa-microphone text-6xl text-[var(--text-muted)] mb-4"></i>
                        <h2 class="text-2xl font-bold mb-2">Select a Recording</h2>
                        <p class="text-[var(--text-muted)] mb-6">Choose a recording from the sidebar to view its transcription and summary</p>
                        <button @click="switchToUploadView" 
                                class="px-6 py-3 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                            <i class="fas fa-plus mr-2"></i>Upload New Recording
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Upload Progress Popup -->
        <div v-if="uploadQueue.length > 0 && !progressPopupClosed" 
             :class="[
                 'fixed bottom-4 left-4 z-[100] w-96 transition-all duration-300',
                 progressPopupMinimized ? 'minimized' : ''
             ]">
            <div class="bg-[var(--bg-secondary)] border-2 border-[var(--bg-accent)] rounded-lg shadow-2xl overflow-hidden backdrop-blur-sm bg-opacity-95 
                        ring-4 ring-[var(--bg-accent)] ring-opacity-20"
                 style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--bg-accent), 0 0 20px rgba(var(--bg-accent-rgb), 0.3)">
                <!-- Progress Header -->
                <div class="bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-accent-hover)] px-3 py-2">
                    <!-- Top row: Title and buttons -->
                    <div class="flex items-center justify-between mb-1">
                        <div class="flex items-center gap-2 min-w-0">
                            <i class="fas fa-upload text-[var(--text-accent)] animate-pulse text-sm"></i>
                            <span class="font-semibold text-[var(--text-accent)] text-sm truncate">Upload Progress</span>
                        </div>
                        <div class="flex items-center gap-1 flex-shrink-0">
                            <button v-if="completedInQueue > 0" @click="clearCompletedUploads()" 
                                    class="px-1.5 py-0.5 text-xs bg-white bg-opacity-20 hover:bg-opacity-30 rounded transition-colors text-[var(--text-accent)] border border-white border-opacity-30"
                                    title="Clear completed uploads">
                                <i class="fas fa-broom"></i>
                            </button>
                            <button @click="progressPopupMinimized = !progressPopupMinimized" 
                                    class="p-0.5 rounded hover:bg-white hover:bg-opacity-20 transition-colors text-[var(--text-accent)]">
                                <i :class="progressPopupMinimized ? 'fas fa-chevron-up text-xs' : 'fas fa-chevron-down text-xs'"></i>
                            </button>
                            <button @click="progressPopupClosed = true" 
                                    class="p-0.5 rounded hover:bg-red-500 hover:bg-opacity-20 text-red-200 hover:text-red-100 transition-colors">
                                <i class="fas fa-times text-xs"></i>
                            </button>
                        </div>
                    </div>
                    <!-- Bottom row: Progress count -->
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-[var(--text-accent)] opacity-80 font-medium">${completedInQueue} of ${totalInQueue} completed</span>
                        <div class="w-24 bg-white bg-opacity-20 rounded-full h-1.5">
                            <div class="bg-white h-1.5 rounded-full transition-all duration-300" 
                                 :style="{width: (completedInQueue / Math.max(totalInQueue, 1) * 100) + '%'}"></div>
                        </div>
                    </div>
                </div>

                <!-- Progress Content -->
                <div v-if="!progressPopupMinimized" class="p-3 max-h-64 overflow-y-auto">
                    <div v-if="currentlyProcessingFile" class="mb-3 p-2.5 bg-[var(--bg-accent)] rounded-lg">
                        <div class="flex items-center justify-between mb-1.5">
                            <span class="font-medium truncate min-w-0 text-sm">${currentlyProcessingFile.file.name}</span>
                            <span class="text-xs flex-shrink-0 ml-2 font-semibold">${processingProgress}%</span>
                        </div>
                        <div class="w-full bg-[var(--bg-secondary)] rounded-full h-1.5 mb-1.5">
                            <div class="bg-[var(--bg-button)] h-1.5 rounded-full transition-all duration-300" 
                                 :style="{width: processingProgress + '%'}"></div>
                        </div>
                        <p class="text-xs text-[var(--text-muted)]">${processingMessage}</p>
                    </div>

                    <div v-if="finishedFilesInQueue.length > 0" class="space-y-1.5">
                        <h4 class="text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wide">Completed</h4>
                        <div v-for="item in finishedFilesInQueue" 
                             :key="item.clientId" 
                             class="progress-list-item p-1.5 bg-[var(--bg-tertiary)] rounded flex items-center gap-2">
                            <i :class="[
                                'fas text-xs',
                                item.status === 'completed' ? 'fa-check-circle text-green-500' : 'fa-exclamation-circle text-red-500'
                            ]"></i>
                            <span class="truncate text-sm flex-1">${item.file.name}</span>
                            <span :class="[
                                'text-xs px-1.5 py-0.5 rounded font-medium',
                                item.status === 'completed' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
                            ]">
                                ${item.status === 'completed' ? 'Done' : 'Failed'}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modals -->
        <!-- Edit Modal -->
        <div v-if="showEditModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-lg">
                <div class="p-6 border-b border-[var(--border-primary)]">
                    <h3 class="text-lg font-semibold">Edit Recording</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">Title</label>
                        <input v-model="editingRecording.title" 
                               class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Participants</label>
                        <input v-model="editingRecording.participants" 
                               class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Meeting Date</label>
                        <input v-model="editingRecording.meeting_date" 
                               type="date"
                               class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2">Notes</label>
                        <textarea v-model="editingRecording.notes" 
                                  rows="4"
                                  class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                        </textarea>
                    </div>
                </div>
                <div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3">
                    <button @click="cancelEdit" 
                            class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button @click="saveEdit" 
                            class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        Save Changes
                    </button>
                </div>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div v-if="showDeleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-md">
                <div class="p-6">
                    <div class="flex items-center gap-4 mb-4">
                        <i class="fas fa-exclamation-triangle text-3xl text-[var(--text-danger)]"></i>
                        <div>
                            <h3 class="text-lg font-semibold">Delete Recording</h3>
                            <p class="text-[var(--text-muted)]">This action cannot be undone.</p>
                        </div>
                    </div>
                    <p class="text-[var(--text-secondary)] mb-6">
                        Are you sure you want to delete "${recordingToDelete?.title || 'this recording'}"?
                    </p>
                    <div class="flex justify-end gap-3">
                        <button @click="cancelDelete" 
                                class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                            Cancel
                        </button>
                        <button @click="deleteRecording" 
                                class="px-4 py-2 bg-[var(--bg-danger)] text-white rounded-lg hover:bg-[var(--bg-danger-hover)] transition-colors">
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit Recording Tags Modal -->
        <div v-if="showEditTagsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-lg">
                <div class="p-6 border-b border-[var(--border-primary)]">
                    <h3 class="text-lg font-medium text-[var(--text-primary)]">Edit Recording Tags</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                            Current Tags
                        </label>
                        <div v-if="getRecordingTags(editingRecording).length > 0" class="flex flex-wrap gap-2 mb-3">
                            <span v-for="tag in getRecordingTags(editingRecording)" :key="tag.id"
                                  class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium text-white"
                                  :style="{ backgroundColor: tag.color }">
                                <i class="fas fa-tag mr-1"></i>
                                <span v-text="tag.name"></span>
                                <button @click="removeTagFromRecording(tag.id)" 
                                        class="ml-2 text-white/80 hover:text-white focus:outline-none">
                                    <i class="fas fa-times text-xs"></i>
                                </button>
                            </span>
                        </div>
                        <p v-else class="text-sm text-[var(--text-muted)]">No tags assigned</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                            Add Tag
                        </label>
                        <select v-model="selectedNewTagId" 
                                class="w-full px-3 py-2 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                            <option value="">Select a tag to add...</option>
                            <option v-for="tag in getAvailableTagsForRecording(editingRecording)" :key="tag.id" :value="tag.id" v-text="tag.name">
                            </option>
                        </select>
                        <button @click="addTagToRecording" 
                                :disabled="!selectedNewTagId"
                                class="mt-2 w-full px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-md hover:bg-[var(--bg-button-hover)] disabled:opacity-50 disabled:cursor-not-allowed">
                            <i class="fas fa-plus mr-2"></i>
                            Add Tag
                        </button>
                    </div>
                </div>
                <div class="px-6 py-4 bg-[var(--bg-tertiary)] border-t border-[var(--border-primary)] flex justify-end gap-3 rounded-b-lg">
                    <button @click="closeEditTagsModal" class="px-4 py-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
                        Close
                    </button>
                </div>
            </div>
        </div>

        <!-- Color Scheme Modal -->
        <div v-if="showColorSchemeModal" class="color-scheme-modal" @click.self="closeColorSchemeModal">
            <div class="color-scheme-modal-content">
                <div class="color-scheme-header">
                    <h2 class="color-scheme-title">
                        <i class="fas fa-palette"></i>
                        Choose Color Scheme
                    </h2>
                    <p class="color-scheme-subtitle">Customize your interface with beautiful color themes</p>
                </div>
                
                <div class="color-scheme-body">
                    <div class="color-scheme-section">
                        <h3 class="color-scheme-section-title">
                            <i :class="isDarkMode ? 'fas fa-moon' : 'fas fa-sun'"></i>
                            ${isDarkMode ? 'Dark' : 'Light'} Themes
                        </h3>
                        <div class="color-scheme-grid">
                            <div v-for="scheme in colorSchemes[isDarkMode ? 'dark' : 'light']" 
                                 :key="scheme.id"
                                 @click="selectColorScheme(scheme.id)"
                                 :class="['color-scheme-option', currentColorScheme === scheme.id ? 'active' : '']">
                                <div class="color-scheme-preview">
                                    <div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-primary color-scheme-preview-segment`"></div>
                                    <div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-secondary color-scheme-preview-segment`"></div>
                                    <div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-tertiary color-scheme-preview-segment`"></div>
                                </div>
                                <div class="color-scheme-name">${scheme.name}</div>
                                <div class="color-scheme-description">${scheme.description}</div>
                                <div v-if="currentColorScheme === scheme.id" class="color-scheme-check">
                                    <i class="fas fa-check"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="color-scheme-footer">
                    <button @click="resetColorScheme" class="color-scheme-reset-btn">
                        <i class="fas fa-undo mr-2"></i>Reset to Default
                    </button>
                    <button @click="closeColorSchemeModal" class="color-scheme-close-btn">
                        Close
                    </button>
                </div>
            </div>
        </div>

        <!-- Reprocess Confirmation Modal -->
        <div v-if="showReprocessModal" @click="cancelReprocess" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm transition-all duration-300 ease-in-out">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 ease-in-out">
                <!-- Header with gradient background -->
                <div class="bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-secondary)] p-5 rounded-t-xl flex items-center">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mr-4 shadow-lg">
                            <i class="fas fa-sync-alt text-white text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-[var(--text-primary)] mb-1">Confirm Reprocessing</h3>
                            <p class="text-sm text-[var(--text-muted)] capitalize">${ reprocessType } reprocessing</p>
                        </div>
                    </div>
                </div>
                
                <!-- Content -->
                <div class="p-6 modal-content">
                    <div v-if="reprocessRecording" class="mb-6">
                        <div class="bg-[var(--bg-tertiary)] rounded-lg p-4 border border-[var(--border-primary)]">
                            <div class="flex items-start space-x-3">
                                <i class="fas fa-file-audio text-[var(--text-accent)] mt-1"></i>
                                <div class="flex-1 min-w-0">
                                    <h4 class="font-medium text-[var(--text-primary)] truncate" :title="reprocessRecording.title">
                                        ${ reprocessRecording.title || 'Untitled Recording' }
                                    </h4>
                                    <p class="text-sm text-[var(--text-muted)] mt-1">
                                        Created: ${ new Date(reprocessRecording.created_at).toLocaleDateString() }
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="flex items-start space-x-3">
                            <div class="w-6 h-6 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-exclamation-triangle text-amber-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1">What will happen?</p>
                                <p class="text-sm text-[var(--text-muted)]" v-if="reprocessType === 'transcription' && !useAsrEndpoint">
                                    The audio will be re-transcribed from scratch. This will also regenerate the title and summary based on the new transcription.
                                </p>
                                <p class="text-sm text-[var(--text-muted)]" v-else-if="reprocessType === 'transcription' && useAsrEndpoint">
                                    The audio will be re-transcribed using the ASR endpoint. This includes diarization and will regenerate the title and summary.
                                </p>
                                <p class="text-sm text-[var(--text-muted)]" v-else-if="reprocessType === 'summary'">
                                    A new title and summary will be generated based on the existing transcription.
                                </p>
                            </div>
                        </div>
                        
                        <!-- ASR Options -->
                        <div v-if="reprocessType === 'transcription' && useAsrEndpoint" class="space-y-4 pt-4 border-t border-[var(--border-primary)]">
                            <h4 class="text-md font-semibold text-[var(--text-secondary)]">ASR Options</h4>
                            <div>
                                <label for="asr-language-reprocess" class="block text-sm font-medium text-[var(--text-muted)]">Language</label>
                                <input type="text" id="asr-language-reprocess" v-model="asrReprocessOptions.language" class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" placeholder="e.g., en, es, zh (optional)">
                            </div>
                            <div>
                                <label for="asr-min-speakers-reprocess" class="block text-sm font-medium text-[var(--text-muted)]">Min Speakers</label>
                                <input type="number" id="asr-min-speakers-reprocess" v-model.number="asrReprocessOptions.min_speakers" class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" placeholder="Optional">
                            </div>
                            <div>
                                <label for="asr-max-speakers-reprocess" class="block text-sm font-medium text-[var(--text-muted)]">Max Speakers</label>
                                <input type="number" id="asr-max-speakers-reprocess" v-model.number="asrReprocessOptions.max_speakers" class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" placeholder="Optional">
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-3">
                            <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-clock text-blue-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1">Processing time</p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    This may take a few minutes to complete. You can continue using the app while processing.
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-3" v-if="reprocessType === 'transcription'">
                            <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-info-circle text-red-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1">Important note</p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    Any manual edits to the transcription, title, or summary will be overwritten.
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-3" v-else-if="reprocessType === 'summary'">
                            <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-info-circle text-red-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1">Important note</p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    Any manual edits to the title or summary will be overwritten.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Footer with action buttons -->
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 rounded-b-xl flex justify-end space-x-3 border-t border-[var(--border-primary)]">
                    <button 
                        @click="cancelReprocess" 
                        class="px-5 py-2.5 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)] transition-all duration-200 flex items-center shadow-sm font-medium">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </button>
                    <button 
                        @click="executeReprocess" 
                        class="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center shadow-lg font-medium transform hover:scale-105">
                        <i class="fas fa-sync-alt mr-2"></i>
                        Start Reprocessing
                    </button>
                </div>
            </div>
        </div>
        <!-- Reset Status Confirmation Modal -->
        <div v-if="showResetModal" @click="cancelReset" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md">
                <div class="p-6 text-center">
                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-orange-100 dark:bg-orange-800 mb-4">
                        <i class="fas fa-exclamation-triangle text-2xl text-orange-500 dark:text-orange-300"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">Reset Recording Status?</h3>
                    <p class="text-sm text-[var(--text-muted)] mb-6">
                        This will mark the recording as 'Failed'. This is useful if processing is stuck. You will be able to reprocess it afterwards.
                    </p>
                </div>
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 rounded-b-xl flex justify-end space-x-3">
                    <button @click="cancelReset" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]">
                        Cancel
                    </button>
                    <button @click="executeReset" class="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600">
                        Yes, Reset Status
                    </button>
                </div>
            </div>
        </div>
        <!-- Simple Transcription Editor Modal -->
        <div v-if="showTextEditorModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col">
                <div class="p-6 border-b border-[var(--border-primary)]">
                    <h3 class="text-lg font-semibold">Edit Transcription</h3>
                </div>
                <div class="p-6 space-y-4 overflow-y-auto flex-1">
                    <div>
                        <label class="block text-sm font-medium mb-2">Transcription Content</label>
                        <textarea v-model="editingTranscriptionContent"
                                  rows="15"
                                  class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] font-mono text-sm">
                        </textarea>
                    </div>
                </div>
                <div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3">
                    <button @click="closeTextEditorModal"
                            class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button @click="saveTranscription"
                            class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        Save Changes
                    </button>
                </div>
            </div>
        </div>

        <!-- ASR Transcription Editor Modal -->
        <div v-if="showAsrEditorModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-6xl flex flex-col max-h-[90vh]">
                <div class="p-5 border-b border-[var(--border-primary)] flex-shrink-0 flex justify-between items-center">
                    <h3 class="text-xl font-bold text-[var(--text-primary)]">Edit ASR Transcription</h3>
                    <button @click="closeAsrEditorModal" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="flex-grow overflow-y-auto custom-scrollbar p-6">
                    <table class="min-w-full asr-editor-table">
                        <thead>
                            <tr>
                                <th class="w-1/4">Speaker</th>
                                <th class="w-24">Start</th>
                                <th class="w-24">End</th>
                                <th>Sentence</th>
                                <th class="w-12"><span class="sr-only">Actions</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(segment, index) in editingSegments" :key="segment.id || index">
                                <td>
                                    <div class="speaker-combobox" @mouseleave="closeSpeakerSuggestions(index)">
                                        <input type="text" v-model="segment.speaker" @input="filterSpeakers(index)" @focus="openSpeakerSuggestions(index)" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] speaker-combobox-input" />
                                        <div class="speaker-combobox-arrow">
                                            <i class="fas fa-chevron-down text-xs"></i>
                                        </div>
                                        <div v-if="segment.showSuggestions" class="speaker-combobox-suggestions">
                                            <div v-for="speaker in segment.filteredSpeakers" @mousedown="selectSpeaker(index, speaker)" class="speaker-suggestion-item">${speaker}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="custom-number-input">
                                        <input type="number" step="0.01" v-model.number="segment.start_time" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" />
                                        <div class="number-spinners">
                                            <button @click="adjustTime(index, 'start_time', 0.1)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg></button>
                                            <button @click="adjustTime(index, 'start_time', -0.1)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg></button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="custom-number-input">
                                        <input type="number" step="0.01" v-model.number="segment.end_time" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" />
                                        <div class="number-spinners">
                                            <button @click="adjustTime(index, 'end_time', 0.1)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg></button>
                                            <button @click="adjustTime(index, 'end_time', -0.1)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg></button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <textarea v-model="segment.sentence" rows="1" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] resize-y"></textarea>
                                </td>
                                <td class="text-center">
                                    <button @click="removeSegment(index)" class="text-red-500 hover:text-red-700">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="mt-4">
                        <button @click="addSegment" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center">
                            <i class="fas fa-plus mr-2"></i> Add Segment
                        </button>
                    </div>
                </div>
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 flex justify-end space-x-3 border-t border-[var(--border-primary)] flex-shrink-0 rounded-b-xl">
                    <button @click="closeAsrEditorModal" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]">Cancel</button>
                    <button @click="saveAsrTranscription" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Save Changes</button>
                </div>
            </div>
        </div>

        <!-- Speaker Identification Modal -->
        <div v-if="showSpeakerModal" @click="closeSpeakerModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-4xl flex flex-col max-h-[90vh]">
                <div class="p-5 border-b border-[var(--border-primary)] flex-shrink-0">
                    <h3 class="text-xl font-bold text-[var(--text-primary)]">Identify Speakers</h3>
                    <!-- Warning for too many speakers -->
                    <div v-if="identifiedSpeakers.length > 8" class="mt-3 p-3 bg-[var(--bg-warn-light)] border border-amber-300 dark:border-amber-800 rounded-lg">
                        <div class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-[var(--text-warn-strong)] mt-0.5 mr-2"></i>
                            <div class="text-sm">
                                <p class="font-medium text-[var(--text-warn-strong)]">More speakers than available colors</p>
                                <p class="text-[var(--text-warn-strong)] mt-1">
                                    You have ${ identifiedSpeakers.length } speakers, but only 8 unique colors are available. 
                                    Colors will repeat after the 8th speaker.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-grow flex overflow-hidden modal-content">
                    <div class="w-1/3 p-6 space-y-4 overflow-y-auto custom-scrollbar border-r border-[var(--border-primary)]">
                        <div v-for="(speaker, index) in identifiedSpeakers" :key="`${selectedRecording.id}-speaker-${index}-${speaker}`" class="space-y-3">
                            <!-- Speaker label with color indicator and "This is Me" checkbox on same line -->
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <div :class="speakerMap[speaker].color" class="w-4 h-4 rounded-full border border-white/30 shadow-sm flex-shrink-0"></div>
                                    <span class="font-mono text-sm text-[var(--text-muted)]">${ speaker }</span>
                                    <span v-if="index >= 8" class="text-xs text-[var(--text-warn-strong)] bg-[var(--bg-warn-light)] px-2 py-0.5 rounded-full" title="Color repeats from speaker ${ ((index % 8) + 1) }">
                                        Repeat
                                    </span>
                                </div>
                                <label class="flex items-center text-sm text-[var(--text-muted)]">
                                    <input type="checkbox" v-model="speakerMap[speaker].isMe" @focus="highlightSpeakerInTranscript(speaker)" @blur="clearSpeakerHighlight" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2">Me</span>
                                </label>
                            </div>
                            
                            <!-- Autocomplete input field - disabled when "This is Me" is checked -->
                            <div class="relative">
                                <input 
                                    type="text" 
                                    v-model="speakerMap[speaker].name" 
                                    @input="searchSpeakers($event.target.value, speaker)"
                                    @focus="focusSpeaker(speaker)" 
                                    @blur="blurSpeaker(); setTimeout(() => speakerSuggestions[speaker] = [], 200)"
                                    :disabled="speakerMap[speaker].isMe"
                                    class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] disabled:bg-[var(--bg-tertiary)] disabled:text-[var(--text-muted)] disabled:cursor-not-allowed" 
                                    :placeholder="speakerMap[speaker].isMe ? 'Me' : 'Enter name for ' + speaker"
                                    autocomplete="off">
                                
                                <!-- Loading indicator -->
                                <div v-if="loadingSuggestions[speaker] && !speakerMap[speaker].isMe" class="absolute right-3 top-1/2 transform -translate-y-1/2">
                                    <i class="fas fa-spinner fa-spin text-[var(--text-muted)] text-sm"></i>
                                </div>
                                
                                <!-- Suggestions dropdown -->
                                <div v-if="speakerSuggestions[speaker] && speakerSuggestions[speaker].length > 0 && !speakerMap[speaker].isMe" 
                                     class="absolute z-10 w-full mt-1 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-md shadow-lg max-h-48 overflow-y-auto">
                                    <div class="py-1">
                                        <div v-for="suggestion in speakerSuggestions[speaker]" 
                                             :key="suggestion.id"
                                             @mousedown="selectSpeakerSuggestion(speaker, suggestion)"
                                             class="px-3 py-2 cursor-pointer hover:bg-[var(--bg-tertiary)] flex items-center justify-between">
                                            <div class="flex-grow">
                                                <div class="text-sm font-medium text-[var(--text-primary)]">${ suggestion.name }</div>
                                                <div class="text-xs text-[var(--text-muted)]">
                                                    Used ${ suggestion.use_count } time${ suggestion.use_count !== 1 ? 's' : '' }
                                                    <span v-if="suggestion.last_used">
                                                        • Last: ${ new Date(suggestion.last_used).toLocaleDateString() }
                                                    </span>
                                                </div>
                                            </div>
                                            <i class="fas fa-user text-[var(--text-muted)] ml-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-2/3 p-6 flex flex-col overflow-hidden">
                        <!-- Audio Player Section -->
                        <div class="mb-4 flex-shrink-0">
                            <h4 class="font-semibold text-[var(--text-secondary)] mb-2">Audio Player</h4>
                            <div class="audio-player-container">
                                <audio controls class="w-full speaker-modal-transcript" :key="selectedRecording.id" :src="'/audio/' + selectedRecording.id" :volume="playerVolume" @volumechange="onPlayerVolumeChange">
                                    Your browser does not support the audio element.
                                </audio>
                            </div>
                        </div>
                        
                        <!-- Transcript Section -->
                        <div class="flex-grow overflow-y-auto custom-scrollbar speaker-modal-transcript" @click="seekAudioFromEvent">
                            <div v-if="processedTranscription.isJson">
                                <div v-for="(segment, index) in processedTranscription.simpleSegments" :key="index" class="speaker-segment mb-2" :data-start-time="segment.startTime">
                                    <p>
                                        <span :class="[segment.color, 'speaker-tag', { 'speaker-highlight': highlightedSpeaker === segment.speakerId }]" :data-speaker-id="segment.speakerId">[${ segment.speaker }]</span>:
                                        <span class="word cursor-pointer hover:bg-[var(--bg-accent)] hover:text-[var(--text-accent)] rounded px-0.5">${ segment.sentence }</span>
                                    </p>
                                </div>
                            </div>
                            <div v-else v-html="highlightedTranscript"></div>
                        </div>
                    </div>
                </div>
                <div class="p-4 bg-[var(--bg-tertiary)] border-t border-[var(--border-primary)] flex-shrink-0">
                    <label class="flex items-center text-sm text-[var(--text-muted)]">
                        <input type="checkbox" v-model="regenerateSummaryAfterSpeakerUpdate" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="ml-2">Regenerate summary after updating names</span>
                    </label>
                </div>
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 flex justify-between items-center border-t border-[var(--border-primary)] flex-shrink-0 rounded-b-xl">
                    <div>
                        <button @click="autoIdentifySpeakers" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center" :disabled="isAutoIdentifying">
                            <i class="fas fa-magic mr-2"></i>
                            <span v-if="!isAutoIdentifying">Auto Identify</span>
                            <span v-else>
                                <i class="fas fa-spinner fa-spin mr-2"></i>
                                Identifying...
                            </span>
                        </button>
                    </div>
                    <div class="flex space-x-3">
                        <button @click="closeSpeakerModal" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]">Cancel</button>
                        <button 
                            @click="saveSpeakerNames" 
                            :disabled="!hasSpeakerNames"
                            :class="hasSpeakerNames 
                                ? 'px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer' 
                                : 'px-4 py-2 bg-gray-400 text-gray-200 rounded-lg cursor-not-allowed'"
                        >
                            Save Names
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Global Error Display -->
        <div v-if="globalError" 
             class="fixed top-4 right-4 bg-[var(--bg-danger)] text-white p-4 rounded-lg shadow-lg z-50 max-w-md">
            <div class="flex items-start gap-3">
                <i class="fas fa-exclamation-circle text-lg flex-shrink-0 mt-0.5"></i>
                <div class="flex-1">
                    <p class="font-medium">Error</p>
                    <p class="text-sm opacity-90">${globalError}</p>
                </div>
                <button @click="globalError = null" 
                        class="text-white hover:text-gray-200 transition-colors">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>

        <!-- System Audio Help Modal -->
        <div v-if="showSystemAudioHelp" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-[var(--bg-secondary)] w-full h-full md:h-auto md:max-h-[90vh] md:w-full md:max-w-2xl md:rounded-lg md:shadow-xl flex flex-col">
                <div class="p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold flex items-center">
                            <i class="fas fa-desktop mr-2 text-blue-500"></i>
                            System Audio Recording
                        </h3>
                        <button @click="showSystemAudioHelp = false" class="text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="p-6 space-y-6 overflow-y-auto flex-grow">
                    <div class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                        <h4 class="font-medium text-[var(--text-primary)] mb-2">How to Record System Audio</h4>
                        <p class="text-sm text-[var(--text-muted)]">
                            To capture audio from meetings or other apps, you must share your screen or a browser tab.
                        </p>
                        <ol class="list-decimal list-inside space-y-2 text-sm text-[var(--text-secondary)] mt-3">
                            <li>Click "Record System Audio" or "Record Both".</li>
                            <li>In the popup, choose <strong>"Entire Screen"</strong> or a <strong>specific browser tab</strong>.</li>
                            <li>Make sure to check the box that says <strong>"Share tab audio"</strong> or <strong>"Share system audio"</strong>.</li>
                        </ol>
                        <p class="text-xs text-amber-600 dark:text-amber-400 mt-3"><i class="fas fa-exclamation-triangle mr-1"></i>Sharing a "Window" will not capture audio.</p>
                    </div>

                    <div class="space-y-4">
                        <h4 class="font-medium text-[var(--text-primary)]">Troubleshooting</h4>
                        
                        <div class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                            <h5 class="font-medium text-[var(--text-primary)] mb-2">Why isn't it working?</h5>
                            <p class="text-sm text-[var(--text-muted)]">
                                System audio recording requires a secure (HTTPS) connection. If you are developing locally, you may need to enable a browser flag.
                            </p>
                        </div>

                        <!-- Chrome Solution -->
                        <div v-if="browser === 'chrome'" class="bg-[var(--bg-accent)] p-4 rounded-lg border border-[var(--border-accent)]">
                            <h5 class="font-medium text-[var(--text-accent)] mb-3 flex items-center">
                                <i class="fab fa-chrome mr-2"></i>
                                For Chrome on Localhost
                            </h5>
                            <ol class="list-decimal list-inside space-y-2 text-sm text-[var(--text-secondary)]">
                                <li>Go to: <code class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">chrome://flags/#unsafely-treat-insecure-origin-as-secure</code></li>
                                <li>Add your local URL (e.g., <code class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">http://localhost:8899</code>)</li>
                                <li>Set to <strong>"Enabled"</strong> and relaunch Chrome.</li>
                            </ol>
                        </div>

                        <!-- Firefox Solution -->
                        <div v-else-if="browser === 'firefox'" class="bg-[var(--bg-accent)] p-4 rounded-lg border border-[var(--border-accent)]">
                            <h5 class="font-medium text-[var(--text-accent)] mb-3 flex items-center">
                                <i class="fab fa-firefox-browser mr-2"></i>
                                For Firefox on Localhost
                            </h5>
                            <p class="text-sm text-[var(--text-secondary)]">
                                System audio recording is not well-supported on Firefox, even with these changes. For best results, please use Chrome.
                            </p>
                            <ol class="list-decimal list-inside space-y-2 text-sm text-[var(--text-secondary)] mt-2">
                                <li>Go to: <code class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">about:config</code></li>
                                <li>Search for <code class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">media.devices.insecure.enabled</code> and set it to `true`.</li>
                                <li>Restart Firefox.</li>
                            </ol>
                        </div>

                        <!-- Other Browsers -->
                        <div v-else class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                            <h5 class="font-medium text-[var(--text-primary)] mb-2">Unsupported Browser</h5>
                            <p class="text-sm text-[var(--text-muted)]">
                                For the best experience with system audio recording, we recommend using Google Chrome.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="p-4 border-t border-[var(--border-primary)] flex justify-end flex-shrink-0">
                    <button @click="showSystemAudioHelp = false" 
                            class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        Got it
                    </button>
                </div>
            </div>
        </div>

        <!-- Toast Container -->
        <div id="toastContainer" class="fixed bottom-4 right-4 z-50 space-y-2"></div>

        <!-- Share Modal -->
        <div v-if="showShareModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-lg">
                <div class="p-6 border-b border-[var(--border-primary)]">
                    <h3 class="text-lg font-semibold">Share Recording</h3>
                </div>
                <div class="p-6 space-y-4">
                    <p class="text-sm text-[var(--text-muted)]">Create a public link to share this recording. Sharing is only available on secure (HTTPS) connections.</p>
                    <div v-if="!generatedShareLink">
                        <div class="flex items-center mb-2">
                            <input type="checkbox" v-model="shareOptions.share_summary" id="share_summary" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <label for="share_summary" class="ml-2 block text-sm text-[var(--text-secondary)]">Share Summary</label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" v-model="shareOptions.share_notes" id="share_notes" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <label for="share_notes" class="ml-2 block text-sm text-[var(--text-secondary)]">Share Notes</label>
                        </div>
                    </div>
                    <div v-if="generatedShareLink" class="mt-4">
                        <label class="block text-sm font-medium mb-2">Shareable Link</label>
                        <div class="flex items-center gap-2">
                            <input :value="generatedShareLink" readonly class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg">
                            <button @click="copyShareLink" class="px-3 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)]">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3">
                    <button @click="closeShareModal" class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button @click="createShare" v-if="!generatedShareLink" class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        Create Link
                    </button>
                </div>
            </div>
        </div>

        <!-- Shares List Modal -->
        <div v-if="showSharesListModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
                <div class="p-6 border-b border-[var(--border-primary)] flex justify-between items-center">
                    <h3 class="text-lg font-semibold">My Shared Transcripts</h3>
                    <button @click="closeSharesList" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="p-6 space-y-4 overflow-y-auto">
                    <div v-if="isLoadingShares" class="text-center">
                        <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                    </div>
                    <div v-else-if="userShares.length === 0" class="text-center text-[var(--text-muted)]">
                        You haven't shared any transcripts yet.
                    </div>
                    <div v-else class="space-y-3">
                        <div v-for="share in userShares" :key="share.id" class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                            <div class="flex justify-between items-start">
                                <div>
                                    <p class="font-semibold">${share.recording_title}</p>
                                    <p class="text-sm text-[var(--text-muted)]">Shared on: ${share.created_at}</p>
                                </div>
                                <button @click="deleteShare(share.id)" class="text-red-500 hover:text-red-700 p-1"><i class="fas fa-trash"></i></button>
                            </div>
                            <div class="mt-4 flex items-center gap-4">
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" v-model="share.share_summary" @change="updateShare(share)" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2">Share Summary</span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" v-model="share.share_notes" @change="updateShare(share)" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2">Share Notes</span>
                                </label>
                            </div>
                            <div class="mt-4">
                                <input :value="'{{ request.url_root }}share/' + share.public_id" readonly class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CSRF Token Management -->
    <script src="{{ url_for('static', filename='js/csrf-refresh.js') }}"></script>
    
    <!-- Vue.js Application Script -->
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
